<template>
    <div id="TableImformation" ref="TableImformation" class="TableImformation">
        <el-form :inline="true" class="TableBox">
            <el-row class="tableNameText">
                <template v-for="(item, index) in dbDataArr">
                    <el-col :span="5" :key="index">
                        <p class="twoLable">{{item.TABLESPACE_NAME}}</p>
                    </el-col>
                </template>
            </el-row>
            <el-row class="waterPage">
                <el-col :span="24">
                    <div ref="waterPolo" class="page">
                    </div>
                </el-col>
            </el-row>
            <el-row class="butomLable">
                <template v-for="(item, index) in dbDataArr">
                    <el-col :span="5" :key="index">
                        <p class="oneLable">
                            可用：
                            <span class="lableNumber">{{item.ALLOCA_FREE_GB}}GB</span>
                        </p>
                        <p class="oneLable">
                            总：
                            <span class="lableNumber">{{item.ALLOCA_GB}}GB</span>
                        </p>
                    </el-col>
                </template>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'dbTableSpace',
                curPage: 1,
                pageSize: 5,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid":""
                },
            },
            freeGB: '',
            totalGB: '',
            waterPolo: {},
            EChartsOption: {
                series: [
                    {
                        radius: '90%',
                        type: 'liquidFill',
                        center: ['10%', '55%'],
                        data: [{value: 0}],
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(69, 73, 240, 0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(69, 73, 240, .25)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(69, 73, 240, 1)'
                                    }],
                                    globalCoord: false
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            }
                        },
                        label: {
                            fontSize: 22,
                            color: 'rgb(0, 255, 0)'
                        },
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: 'rgba(68, 145, 253, 0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(68, 145, 253, .25)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(68, 145, 253, 1)'
                                }],
                                globalCoord: false
                            },
                        },
                    },
                    {
                        radius: '90%',
                        type: 'liquidFill',
                        center: ['30%', '55%'],
                        data: [{value: 0}],
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(69, 73, 240, 0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(69, 73, 240, .25)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(69, 73, 240, 1)'
                                    }],
                                    globalCoord: false
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            }
                        },
                        label: {
                            fontSize: 22,
                            color: 'rgb(0, 255, 0)'
                        },
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: 'rgba(68, 145, 253, 0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(68, 145, 253, .25)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(68, 145, 253, 1)'
                                }],
                                globalCoord: false
                            },
                        },
                    },
                    {
                        radius: '90%',
                        type: 'liquidFill',
                        center: ['50%', '55%'],
                        data: [{value: 0}],
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(69, 73, 240, 0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(69, 73, 240, .25)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(69, 73, 240, 1)'
                                    }],
                                    globalCoord: false
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            }
                        },
                        label: {
                            fontSize: 22,
                            color: 'rgb(0, 255, 0)'
                        },
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: 'rgba(68, 145, 253, 0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(68, 145, 253, .25)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(68, 145, 253, 1)'
                                }],
                                globalCoord: false
                            },
                        },
                    },
                    {
                        radius: '90%',
                        type: 'liquidFill',
                        center: ['70%', '55%'],
                        data: [{value: 0}],
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(69, 73, 240, 0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(69, 73, 240, .25)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(69, 73, 240, 1)'
                                    }],
                                    globalCoord: false
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            }
                        },
                        label: {
                            fontSize: 22,
                            color: 'rgb(0, 255, 0)'
                        },
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: 'rgba(68, 145, 253, 0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(68, 145, 253, .25)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(68, 145, 253, 1)'
                                }],
                                globalCoord: false
                            },
                        },
                    },
                    {
                        radius: '90%',
                        type: 'liquidFill',
                        center: ['90%', '55%'],
                        data: [{value: 0}],
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(69, 73, 240, 0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(69, 73, 240, .25)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(69, 73, 240, 1)'
                                    }],
                                    globalCoord: false
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            }
                        },
                        label: {
                            fontSize: 22,
                            color: 'rgb(0, 255, 0)'
                        },
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: 'rgba(68, 145, 253, 0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(68, 145, 253, .25)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(68, 145, 253, 1)'
                                }],
                                globalCoord: false
                            },
                        },
                    }
                ]
            },
            timerName: 'TableImformation',
            timerEventName: 'timerTableImformation',
            timerInterval: 1000 * 60,
            selectedMonID: {},
            dbDataArr: []
        }
    },
    created() {
        bus.$on('selectedMonID', msg => {
            this.resetData();

            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedDBMonID;
            this.getData();
        });

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                // this.resetData();

                this.getData();
            }
        });
        
    },
    mounted() {
        
            this.waterPolo = this.$echarts.init(this.$refs.waterPolo);
        
        this.drawMemoryLine();
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
                
                if (res.data.length > 0) {
                    this.dbDataArr = res.data;

                    this.dbDataArr.forEach((element, index) => {
                        this.EChartsOption.series[index].data[0].value = element.TALALL_PER;
                    });
                }else{
                    this.resetData();
                }

                this.drawMemoryLine();
            });
        },
        drawMemoryLine(){
            this.waterPolo.setOption(this.EChartsOption, true);
        },
        resetData() {
            this.dbDataArr = [];
            this.EChartsOption.series[0].data[0].value = 0;
            this.EChartsOption.series[1].data[0].value = 0;
            this.EChartsOption.series[2].data[0].value = 0;
            this.EChartsOption.series[3].data[0].value = 0;
            this.EChartsOption.series[4].data[0].value = 0;
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
        
        this.waterPolo.dispose();
    },
    watch:{
        
    }
}
</script>

<style scoped>
.TableImformation{
    padding: 0px 5px;
    height: calc(100% - 22px - 8px);
    text-align: center;
    color: aliceblue;
}


.el-col-5{
    width: 20% !important;
}
.basicImformation{
    background-color: rgba(0, 0, 0, 0);
}
.twoLable>>> .el-form-item__label{
    color: aliceblue;
    line-height: 16px;
    font-size: small;
    padding: 0 0 0 0;
}
.twoLable>>> .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 0px;
    margin-right: 0px;
}
/* .TableBox {
    display: grid;
    grid-template-rows: 1fr 3fr 2fr;
} */
.tableNameText{
    height: 10%;
    display: block;
}
.waterPage{
    height: 58%;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.page {
    min-height: 98px;
    
}

.butomLable{
    height: calc(100% - 68%);
    padding-left: 0px !important;
    padding-right: 0px !important;
    text-align: center;
    /* padding-top: 0.8%; */
}
.oneLable>>> .el-form-item__label{
    padding: 0 0 0 0;
    color: aliceblue;
    font-size: xx-small;
}
.lableNumber{
    color: aliceblue;
    width: auto;
    font-size: xx-small;
}

@media screen and (max-width: 1365px) and (min-width: 1280px) {
  
    p.oneLable {
       font-size: 8px !important;
   }
 
}
@media screen and (max-width: 1600px) and (min-width: 1365px) {
  
    p.oneLable {
       font-size: 8px !important;
   }
}
@media screen and (max-width: 1778px) and (min-width: 1600px) {
  
    .oneLable {
       font-size: 10px !important;
   }
}
@media screen and (max-width: 1920px) and (min-width: 1778px) {
   
   .oneLable {
       font-size: 12px !important;
   }
   
}
@media screen and (max-width: 2560px) and (min-width: 1920px) {
     .oneLable {
       font-size: 20px;
   } 
   
}
@media screen and (min-width: 2560px) {
   .oneLable{
       font-size: 22px;
   } 
   
}

</style>    